<template>
  <a-spin :spinning="loading">
    <div style="margin-bottom: 10px;display: flex;">
      <a-button style="margin-right: auto" type="primary" @click="$router.push({path:'/tail/truckDeliver/form',query:{id:id}})" :disabled="disabledType.includes(info.status)"><LeftOutlined />重新报价</a-button>
      <a-popconfirm
          title="确定要作废吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="del"
          :disabled="disabledType.includes(info.status)"
      >
        <a-button type="primary" danger style="margin-right: 20px" :disabled="disabledType.includes(info.status)"
        >作废</a-button
        >
      </a-popconfirm>
      <a-button @click="$router.push('/tail/truckDeliver')"><CloseOutlined />关闭</a-button>
    </div>
    <h2 style="font-weight: bold">基本信息</h2>
    <a-descriptions :column="1">
      <a-descriptions-item label="询价时间">
        <span v-if="info.rateTime">
            {{ info.rateTime }}
        </span>
      </a-descriptions-item>
      <a-descriptions-item label="客户订单">
        {{ info.userOrderId }} / {{ info.saleOrderCode }}
      </a-descriptions-item>
      <a-descriptions-item label="发货信息">
        {{ info.originInfo?.originLocationName }} / {{ info.originInfo?.originAddressLine1 }},
        <span v-show="info.originInfo?.originAddressLine2">
            {{ info.originInfo?.originAddressLine2 }},
          </span>
        {{ info.originInfo?.originCityName }},
        {{ info.originInfo?.originStateCode }}, {{ info.originInfo?.originZipCode }} /
        {{ info.originInfo?.originCountry }}
        <br />
        {{ info.originInfo?.originContactName }}：{{ info.originInfo?.originContactEmail }} /
        {{ info.originInfo?.originContactPhone }}
        <br />
        提货日期：{{ info.originInfo?.originDate || '无' }} <br />
        提货备注：{{ info.originInfo?.originMemo || '无' }} <br />
      </a-descriptions-item>
      <a-descriptions-item label="收货信息">
        {{ info.destinationInfo?.destinationContactName }} / {{ info.destinationInfo?.destinationAddressLine1 }},
        <span v-show="info.destinationInfo?.destinationAddressLine2">
            {{ info.destinationInfo?.destinationAddressLine2 }},
        </span>
        {{ info.destinationInfo?.destinationCityName }},
        {{ info.destinationInfo?.destinationStateCode }}, {{ info.destinationInfo?.destinationZipCode }} /
        {{ info.destinationInfo?.destinationCountry }}
        <br />
        {{ info.destinationInfo?.destinationContactEmail }} / {{ info.destinationInfo?.destinationContactPhone }}
        <br />
        特殊服务：{{ info.destinationInfo?.destinationSpecificService || '无' }} <br />
        备注：{{ info.destinationInfo?.destinationMemo || '无' }}
      </a-descriptions-item>
      <a-descriptions-item label="货物信息">
        <a-descriptions style="margin-top: 20px">
          <a-descriptions-item :span="3" label="价值">
            ${{ info.priceValue }} &ensp;&ensp;&ensp; 保费：${{ info.insuredValue }}
          </a-descriptions-item>
          <a-descriptions-item :label="'托板'+(index+1)" :span="1" v-for="(item,index) in info.completePalletInfoList" :key="index" >
            {{ item.summary.summary }} <br />
            包装：{{ item.summary.packageType }}<br/>
            托板：{{ item.summary.palletUnits }} {{ item.summary.unitType }}<br/>
            规格：{{ item.summary.length  }}{{dimensionlessUnits}} * {{ item.summary.width }}{{dimensionlessUnits}} * {{ item.summary.height }}{{dimensionlessUnits}} / {{ item.summary.weight }}{{info.measureCode}}<br/>
            <!-- 价值：$ {{ item.summary.value }} -->
          </a-descriptions-item>
        </a-descriptions>
      </a-descriptions-item>
    </a-descriptions>
    <a-alert v-if="info.memo" :message="info.memo" type="warning" show-icon  closable/>
    <!--  表格组件    -->
    <h2 style="font-weight: bold">比价列表</h2>
    <a-alert v-if="info.rateMessage" :message="info.rateMessage" type="warning" show-icon  closable/>
    <common-table
        :customFilterDropdown="true"
        :columns="columns"
        :dataSource="dataList"
        v-model:loading="loading"
        :rowKey="(record) => record.id"
        :scroll="{ x: 'max-content'}"
        :slots="['action','accesoriesList','theOriginalPriceOf','carrierName']"
    >
      <template #carrierName="{record}">
        {{ record.carrierName }}
        <svg v-if="record.carrierName === info.carrierName && info.status === 'ORDERED'" t="1724827532846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4446" id="mx_n_1724827532847" width="20" height="20"><path d="M188.3323424 239.45235413l6.89517333 0 70.56937814-43.97978986-2.4177312 1.30874026c2.30202987-1.07515413 6.93337707-3.0912032 13.54147946-5.73924693 11.16304213-4.4687104 23.6348256-8.9494272 37.04859627-13.1321568 37.31602027-11.63239893 74.43665707-18.6716544 108.45299307-18.90196587 30.80178987-0.212848 57.38155413 5.23168747 78.9140992 16.9273952 125.785344 68.33174933 263.10484907 56.22671893 351.79575253-44.15115946-0.0851392 0.09823787-0.60143147 0.53266453-1.85886933 1.21050346-3.0573664 1.65038827-7.14185813 2.49413867-11.60620267 1.79992747-4.18709653-0.6516416-7.41474027-2.43082987-9.5934272-4.58004587-0.8874112-0.87322133-1.25743893-1.41898453-1.39387947-1.69186666 1.35130987 2.693888 2.88272213 10.0540512 3.8716448 19.65948586 1.08279467 10.4895712 1.43644907 21.3873728 1.40697814 29.24527254l0 372.27170026 3.29204373-10.52886613c-0.50755947 0.75097067-2.1273856 2.768112-4.89440533 5.63336853-4.9500736 5.12471787-11.16304213 10.32693333-18.67929494 15.2169728-38.08008853 24.77110507-91.74826987 32.04503787-165.4939904 9.7942688-94.195472-28.43099413-182.3286048-24.017952-248.83750506 6.6932416-60.93010667 28.1373728-95.78582613 76.35992747-80.51318614 117.86413547l21.74539307 27.95727147c0-45.83975147 35.2606752-89.9057728 78.9140992-110.06081174 55.62856213-25.6890784 131.4645568-29.485408 214.667264-4.37156373 87.21952533 26.31670613 155.7302848 17.03109013 205.39037973-15.27591467 17.9457888-11.6782432 29.49304853-23.62936853 35.45715094-32.40087573l3.29204373-4.83982933L878.29832107 177.6752224c0.0338368-9.14917653-0.35802027-21.195264-1.59908694-33.22388693-1.42880853-13.84383253-3.66207147-24.58882027-7.66579093-32.5536896-9.88377387-19.6682176-34.3612576-23.4852864-50.52567573-5.18911787-73.7806496 83.50615147-186.4338368 93.4368608-294.35853014 34.80550933-29.17759787-15.8489664-63.6632896-22.91332693-102.0653792-22.6491776-39.46632747 0.27288213-81.06768107 8.1602528-122.55005866 21.0882944-14.65920213 4.57131307-28.277088 9.4657184-40.53929814 14.3732224-7.44966933 2.9853248-12.86909867 5.34302293-15.92100693 6.76637334l-2.4177312 1.3141984-64.8945312 40.44106133 12.57329493-3.5387296-41.63519146 0 0 40.14307413L188.3323424 239.45235413zM137.704064 173.00567147l-39.59731093 14.97901973 310.7226976 740.09324587 39.59731093-14.97792854L137.704064 173.00567147z" fill="#2ca40e" p-id="4447"></path><path d="M188.3323424 239.45235413l6.89517333 0 70.56937814-43.97978986-2.4177312 1.30874026c2.30202987-1.07515413 6.93337707-3.0912032 13.54147946-5.73924693 11.16304213-4.4687104 23.6348256-8.9494272 37.04859627-13.1321568 37.31602027-11.63239893 74.43665707-18.6716544 108.45299307-18.90196587 30.80178987-0.212848 57.38155413 5.23168747 78.9140992 16.9273952 125.785344 68.33174933 263.10484907 56.22671893 351.79575253-44.15115946-0.0851392 0.09823787-0.60143147 0.53266453-1.85886933 1.21050346-3.0573664 1.65038827-7.14185813 2.49413867-11.60620267 1.79992747-4.18709653-0.6516416-7.41474027-2.43082987-9.5934272-4.58004587-0.8874112-0.87322133-1.25743893-1.41898453-1.39387947-1.69186666 1.35130987 2.693888 2.88272213 10.0540512 3.8716448 19.65948586 1.08279467 10.4895712 1.43644907 21.3873728 1.40697814 29.24527254l0 372.27170026 3.29204373-10.52886613c-0.50755947 0.75097067-2.1273856 2.768112-4.89440533 5.63336853-4.9500736 5.12471787-11.16304213 10.32693333-18.67929494 15.2169728-38.08008853 24.77110507-91.74826987 32.04503787-165.4939904 9.7942688-94.195472-28.43099413-182.3286048-24.017952-248.83750506 6.6932416-60.93010667 28.1373728-95.78582613 76.35992747-80.51318614 117.86413547l21.74539307 27.95727147c0-45.83975147 35.2606752-89.9057728 78.9140992-110.06081174 55.62856213-25.6890784 131.4645568-29.485408 214.667264-4.37156373 87.21952533 26.31670613 155.7302848 17.03109013 205.39037973-15.27591467 17.9457888-11.6782432 29.49304853-23.62936853 35.45715094-32.40087573l3.29204373-4.83982933L878.29832107 177.6752224c0.0338368-9.14917653-0.35802027-21.195264-1.59908694-33.22388693-1.42880853-13.84383253-3.66207147-24.58882027-7.66579093-32.5536896-9.88377387-19.6682176-34.3612576-23.4852864-50.52567573-5.18911787-73.7806496 83.50615147-186.4338368 93.4368608-294.35853014 34.80550933-29.17759787-15.8489664-63.6632896-22.91332693-102.0653792-22.6491776-39.46632747 0.27288213-81.06768107 8.1602528-122.55005866 21.0882944-14.65920213 4.57131307-28.277088 9.4657184-40.53929814 14.3732224-7.44966933 2.9853248-12.86909867 5.34302293-15.92100693 6.76637334l-2.4177312 1.3141984-64.8945312 40.44106133 12.57329493-3.5387296-41.63519146 0 0 40.14307413L188.3323424 239.45235413zM137.704064 173.00567147l-39.59731093 14.97901973 310.7226976 740.09324587 39.59731093-14.97792854L137.704064 173.00567147z" fill="#2ca40e" p-id="4448"></path></svg>
      </template>
      <template #accesoriesList="{ record }">
        <div v-for="(item, index) in record.accesoriesList" :key="index">
          {{ index + 1 }}、服务名：{{ item.serviceName }}&emsp;费用：{{ item.chargeAmount }}
        </div>
      </template>
      <template #theOriginalPriceOf="{ record}">
        <span>
            {{ (record.totalCharge / info.priceValue * 100).toFixed(2) }}
            <template v-if="(record.totalCharge / info.priceValue * 100).toFixed(2) > 0">
              %
            </template>
          </span>
      </template>
      <template #action="{ record }">
        <a-popconfirm
            title="确认下单吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="handleBook(record)"
            :disabled="['ORDERED','CANCELLED'].includes(info.status)"
        >
          <a-button type="primary" :disabled="['ORDERED','CANCELLED'].includes(info.status)">下单</a-button>
        </a-popconfirm>
      </template>
    </common-table>
  </a-spin>
</template>
<script setup>
import {useRoute,useRouter} from "vue-router";
import {onMounted,ref} from "vue";
import {message} from "ant-design-vue";
import {getTruckDeliverDetail, getTruckDeliverRateList} from "@/api/tail/detail.js";
import CommonTable from "@/components/commonTable/index.vue";
import {orderBooking} from "@/api/tail/form.js";
const router = useRouter()
const route = useRoute()
const {id} = route.query
const disabledType = ['ORDERED', 'CANCELLED', 'TAGGED']
const loading = ref(false)
const columns = [
  {
    title: '平台',
    align: 'center',
    dataIndex: 'platform',
  },
  {
    title: '承运商',
    align: 'center',
    dataIndex: 'carrierName',
  },
  {
    title: '基础费用',
    align: 'center',
    dataIndex: 'lineCharge',
    sorter: (a, b) => a.lineCharge - b.lineCharge
  },
  {
    title: '燃油费用',
    align: 'center',
    dataIndex: 'fuelCharge',
    sorter: (a, b) => a.fuelCharge - b.fuelCharge
  },
  {
    title: '附加服务费',
    align: 'center',
    dataIndex: 'accessorialCharge',
    sorter: (a, b) => a.accessorialCharge - b.accessorialCharge
  },
  {
    title: '总金额',
    align: 'center',
    dataIndex: 'totalCharge',
    sorter: (a, b) => a.totalCharge - b.totalCharge
  },
  {
    title: '币种',
    align: 'center',
    dataIndex: 'currencyCode',
  },
  {
    title: '原价占比',
    align: 'center',
    dataIndex: 'theOriginalPriceOf',
  },
  {
    title: '服务承诺',
    align: 'center',
    dataIndex: 'carrierGuarantee'
  },
  {
    title: '附加服务列表',
    align: 'center',
    dataIndex: 'accesoriesList',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
  }
]
const dataList = ref([])
const info = ref({})
const handleBook = async (record) => {
  console.log(record)
  try{
    const res = await orderBooking({
      truckOrderId:record.truckOrderId,
      truckRateId:record.id,
    })
    message.success(res.message)
    setTimeout(()=>{
      router.push({path: '/tail/result',query:{id:id,type:'success'}})
    },1000)
  }catch (e){
    message.error(e)
    setTimeout(()=>{
      router.push({path: '/tail/result',query:{id:id,type:'error'}})
    },1000)
  }
}
const init = async () => {
  try{
    loading.value = true
    await initDetail()
    await initList()
  }catch (e){
    message.error(e)
  }finally {
    loading.value = false
  }
}

const initDetail = async () => {
  try{
    const res = await getTruckDeliverDetail({id:id})
    console.log(res)
    info.value = res.result
  }catch (e){
    message.error(e)
  }
}

/**
 * 初始化列表
 * @returns {Promise<void>}
 */
const initList = async () => {
  try{
    const res = await getTruckDeliverRateList({id:id})
    dataList.value = res.result.records
  }catch (e){
    message.error(e)
  }
}

onMounted(()=>{
  init()
})
</script>
<style scoped>
:deep(.ant-descriptions .ant-descriptions-item-container .ant-descriptions-item-content){
  display: block;
}
</style>
